<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>问题编辑器</title>

    {% include 'template/baseCss.volt' %}
    <link href="/css/vendor/issue-editor.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>

</head>

<body>
<main>
    <table class="issue-prop" cellpadding="0" cellspacing="0">
        <tr>
            <td class="title" valign="top" style="word-spacing: 26px">问 题:</td>
            <td>{{ data["question_title"] }}</td>
        </tr>
        <tr>
            <td class="title" valign="top" style="word-spacing: 2px">提 交 人:</td>
            <td>{{ data["nickname"] }}</td>
        </tr>
        <tr>
            <td class="title" valign="top">提交时间:</td>
            <td>{{ data["created_at"] }}</td>
        </tr>
        <tr>
            <td class="title" valign="top" style="word-spacing: 26px">说 明:</td>
            <td>{{ data["question_desc"] }}</td>
        </tr>
    </table>

    <div class="sep-line"><label></label></div>

    <p class="title">回复历史:</p>
    <ul id="history-list">

    </ul>

    <div class="sep-line"><label></label></div>

    <p class="title">回 复:</p>

    <div class="upload-file-wrap">
{#        <table id="upload-file-control">
            <tr>
                <td><input id="file-selector" type="file"></td>
                <td><p id="upload-percent">0%</p></td>
                <td><button id="cancel-upload">停止上传</button> </td>
            </tr>
        </table>#}
        <div id="upload-file" class="cmp-upload-file-btn-wrap">
            <input id="file-selector" type="file">
            <div class="btn-h">
                <div class="icon"></div>
                <span>上传文件</span>
            </div>
            <label id="upload-file-name" class="name">未选择任何文件</label>
{#            <label id="upload-percent" class="progress">0%</label>
            <img class="del-btn button" id="cancel-upload" src="/images/issue-editor-del.png" alt="删除">#}
        </div>
        {#<table id="file-list">

        </table>#}
        <ul id="file-list" class="uploaded-list">
        </ul>
    </div>


    <div class="reply-wrap">
        <div class="reply-container" id="reply-text"></div>
    </div>

    <div class="submit-wrap">
        <div class="reply-btn button" onclick="DataProxy.clickReplyButton()">回 复</div>
    </div>

    <div class="state-wrap">
        <div id="issue-state" class="state button" onClick="issueEditorM.clickIssueListToggle(this)"><label></label><img
                    src="/images/issue-editor-list-toggle.png"></div>
        <ul id="issue-list">
            <li>
                <div class="state button" style="background-color: #1F61D3;"
                     onClick="issueEditorM.clickIssueListItem(this)" tag="0">待处理
                </div>
            </li>
            <li>
                <div class="state button" style="background-color: #FFB60F;"
                     onClick="issueEditorM.clickIssueListItem(this)" tag="1">处理中
                </div>
            </li>
            <li>
                <div class="state button" style="background-color: #53D31F;"
                     onClick="issueEditorM.clickIssueListItem(this)" tag="2">已解决
                </div>
            </li>
            <li>
                <div class="state button" style="background-color: #C600FF;"
                     onClick="issueEditorM.clickIssueListItem(this)" tag="3">已回复
                </div>
            </li>
        </ul>
    </div>
</main>
</body>

{% include 'template/baseJs.volt' %}
<script src="/js/vendor/issue-editor.js"></script>
<script type="text/javascript" src="/third-part/wang-editor/wangEditor.min.js"></script>
<script src="/js/cos-js-sdk-v5.js"></script>

<script>

    $(function () {
        DataProxy.init();
    });

    var DataProxy = {

        editor: false,
        params: {},
        taskId: false,
        cos: false,
        uploadState: false,
        init: function () {
            //初始化
            var E = window.wangEditor;
            this.editor = new E('#reply-text');
            this.editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1')>0;
            this.editor.create();

            DataValidBinder.bind();
            issueEditorM.setIssueColor({{ data["state"] }});
            DataProxy.refresh();

        },

        //刷新页面数据
        refresh: function () {
            $("#history-list").html("");
            var urlId = getQueryString("id");
            feimaPost("/setting/replyhistory", {question_id: urlId}, function (result) {
                if (result.status == 0) {
                    DataProxy.params = {
                        Bucket: result.data[0]['bucket'],
                        Region: result.data[0]['region'],
                        Appid: result.data[0]['appid'],
                        Url: result.data[0]['url'],
                        Path: result.data[0]['path']
                    };
                    DataProxy.uploadFile(DataProxy.params);
                    var replyData = result.data[1];
                    for (var i = 0; i <= replyData.length - 1; i++) {
                        var data = replyData[i];
                        DataProxy.addItem(data);
                    }
                }
            });
        },
        addItem: function (data) {

            var state = data['reply_state'];
            if (!state) {
                state = 0;
            }
            var clour = "";
            switch (state){
                case '0':clour = "background-color: #1F61D3;";
                break;
                case '1':clour = "background-color: #FFB60F;";
                break;
                case '2':clour = "background-color: #53D31F;";
                break;
                case '3':clour = "background-color: #C600FF;";
                break;
            }
            var stateStr = issueEditorM.getStateStr(state);
            var tem_str = "";
            var message =
                "<div class=\"info\"><span class='name'>用户" + data['nickname'] +"于 " + data['created_at']
                + "</span><span class='state' style='" + clour + "'>"+ stateStr
                + "</span><div class='msg'>" + data['reply_content'] + "</div></div>";

            if (data['fileData']){
                var file = "";
                data['fileData'].forEach(function(item){
                    file += "<p class='file button' ><a href=" + item['file_url'] + ">" + item['file_name'] + "</a></p>";
                });
                file = "<div class='attachment-wrap'><p class='type'>附件:</p>" + file + "</div>";
                tem_str = "<li>" + message + file + "</li>";
            }else{
                tem_str = "<li>" + message + "</li>";
            }
            $("#history-list").append(tem_str);
        },
        //点击回复按钮
        clickReplyButton: function () {
            if (DataProxy.uploadState == false){
                var state = issueEditorM.getIssueCurrentState();
                var urlId = getQueryString("id");
//            var text = $("#reply-text").val();
                var text = DataProxy.editor.txt.html();
//            alert(text);
                var fileList = this.getFileInfo();

                if (DataProxy.editor.txt.text().length > 0) {
                    feimaPost("/setting/addreplymessage", {
                            text: text,
                            state: state,
                            question_id: urlId,
                            fileList: fileList
                        }
                        , function (result) {
                            if (result.status == 0) {
                                DataProxy.addItem(result.data);
                                DataProxy.clearInfo(new Array("all"));
                            } else {
                                FAlert(result.message);
                            }
                        });

                } else {
                    FAlert("请输入内容");
                }
            }else{
                FAlert("正在上传文件");
            }
        },
        //清理输入信息
        clearInfo: function(param) {
            if ($.inArray('editor', param) >= 0){
                DataProxy.editor.txt.clear();
            }
            if ($.inArray('selectFile', param) >= 0){
                $("#upload-file-name").text("未选择任何文件");
            }
            if ($.inArray('percent', param) >= 0){
                $("#upload-percent").remove();
                $("#cancel-upload").remove();
            }
            if ($.inArray('list', param) >= 0){
                $("#file-list").html("");
            }
            if ($.inArray('all', param) >= 0){
                DataProxy.editor.txt.clear();
                $("#upload-percent").remove();
                $(".del-btn button").remove();
                $("#file-list").html("");
            }
        },
        getFileInfo:function(){
            var fileList = new Array();
            $("#file-list").find("a").each(function(){
                fileList.push({
                    Key: $(this).attr("data-key"),
                    Name: $(this).text(),
                    Url: $(this).attr("href")
                });
            });
            return fileList;
        },
        deleteFileButton: function(obj){
            var key = $(obj).parent().find("a").attr("data-key");
            var new_params = {};
            new_params.Bucket = DataProxy.params["Bucket"];
            new_params.Region = DataProxy.params["Region"];
            new_params.Key = key;
            this.cos.deleteObject(new_params, function(err, data){
                if(err){
                    console.log(err);
                }else{
                    console.log(data);
                    $(obj).parent().remove();
                }
            });
        },
        addPrecent: function(obj){
            str = "<label id=\"upload-percent\" class=\"progress\">0%</label>" +
                "<img class=\"del-btn button\" id=\"cancel-upload\" onClick=\"DataProxy.cancleUpload()\" src=\"/images/issue-editor-del.png\" alt=\"删除\">";
            $("#upload-file").append(str);
        },
        cancleUpload: function(){
            DataProxy.cos.cancelTask(DataProxy.taskId);
            DataProxy.uploadState = false;
            DataProxy.clearInfo(new Array("percent","selectFile"));
        },
        uploadFile: function(params) {
            this.cos = new COS({
                AppId: params['Appid'],
                getAuthorization: function (options, callback) {
                    // 异步获取签名
                    feimaPost("/setting/sendAuthorization", {
                        method: (options.Method || 'get').toLowerCase(),
                        pathname: '/' + (options.Key || '')
                    }, function (authorization) {
                        callback(authorization.data);
                    });
                }

            });
            // 监听选文件
            document.getElementById('file-selector').onchange = function () {
                DataProxy.addPrecent();//加入上传百分比按钮
                var file = this.files[0];
                var d = new Date();
                var redomFileName = d.getTime().toString() + "-" + file.name;
                if (!file) return;
                //上传状态为true
                DataProxy.uploadState = true;
                // 分片上传文件
                DataProxy.cos.sliceUploadFile({
                    Bucket: params['Bucket'],
                    Region: params['Region'],
                    Key: params['Path'] + redomFileName,
                    Body: file,
                    onHashProgress: function(progressData){
                        console.log(JSON.stringify(progressData));
                    },
                    TaskReady: function(taskId) {                   /* 非必须 */
                        console.log(taskId);
                        DataProxy.taskId = taskId;
                    },
                    onProgress: function (progressData) {           /* 非必须 */
                        console.log(JSON.stringify(progressData));
                        $("#upload-percent").text(progressData.percent * 100+"\%");
                    }
                }, function (err, data) {
                    //上传成功
                    console.log(err, data);
                    console.log(data['Location']);
                    DataProxy.uploadState = false;
                    var str =
                        "<li><a href=" + params['Url'] + "/" + data['Key'] +" target='_blank' data-key=" + redomFileName + ">" + file.name
                        + "</a><img onClick='DataProxy.deleteFileButton(this)' class='del-btn button' src='/images/issue-editor-del.png'" + " alt='删除'></li>";
                        /*"<tr><td><a target='_blank' data-key='"
                        + redomFileName + "' href='" + params['Url']
                        + "/"
                        + data['Key']
                        + "'>"
                        + file.name
                        +"</a></td><td><button onclick='DataProxy.deleteFileButton(this)'>删除</input></td></tr>";*/
                    $("#file-list").append(str);
                    DataProxy.clearInfo(new Array("percent","selectFile"));
                });
            };
        }
    };


</script>

</html>






